<template>
  <m-card :icon="icon" :title="title"> 
      <div class="nav jc-between">
        <div class="nav-item"  :class="{ active: active === index }"
          v-for="(category, index) in categories" :key="index"
          @click="$refs.list.swiper.slideTo(index)">
          <div class="nav-link">{{category.name}}</div>
        </div>
      </div>
      <div class="pt-3">
        <swiper :options="{autoHeight: true}" ref="list" @slide-change="() => active = $refs.list.swiper.realIndex">
          <swiper-slide v-for="(category, index) in categories" :key="index">
            <!-- <div class="py-2" v-for="n in 5" :key="n">
              <span>[新闻]</span>
              <span>|</span>
              <span>抢先服新赛季更新，云缨登场好礼享不停</span>
              <span>06/15</span>
            </div> -->
            <slot name="items" :category="category"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
</template>

<script>
export default {
    props: {
        icon: { type: String, required: true},
        title: { type: String, required: true},
        categories: { type: Array, required: true}
    },
    data(){
        return{
            active: 0
        }
    }
}
</script>

<style>

</style>